@model dynamic

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>title</title>
    <link href="/css/tableStyle.css" rel="stylesheet"/><!--添加表格样式-->
    <script src="/ckeditor/ckeditor.js"></script><!--添加ckeditor编辑器--->
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/form-serialize.js"> </script>
    <style type="text/css">
        textarea, select {
            padding: 2px;
            border: 1px solid;
            border-color: #666 #ccc #ccc #666;
            background: #F9F9F9;
            color: #333;
            resize: none;
            width: 100%;
        }

        .textbox {
            padding: 3px;
            border: 1px solid;
            border-color: #666 #ccc #ccc #666;
            background: #F9F9F9;
            color: #333;
            resize: none;
            width: 100%;
        }

        .textbox:hover, .textbox:focus, textarea:hover, textarea:focus {
            border-color: #09C;
            background: #F5F9FD;
        }
    </style>
</head>
<body>
<div>
    <form id="addForm">


        <table style="width:auto; margin: 0 auto">
            <tr>
                <td>简短标题:</td>
                <td>
                    <select name="TitleType" id="TitleType">
                        <option></option>
                        <option style="color: green">[图文]</option>
                        <option style="color: red">[组图]</option>
                        <option style="color: #990000">[推荐]</option>
                        <option style="color: #0000FF">[注意]</option>
                        <option style="color: blue">[公告]</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="title" maxlength="160" class="textbox" id="title" />
                </td>
                <td>
                    <select name="TitleFontType" id="TitleFontType">
                        <option value="0">字形</option>
                        <option value="1">粗体</option>
                        <option value="2">斜体</option>
                        <option value="3">粗+斜</option>
                        <option value="0">规则</option>
                    </select>
                </td>
                <td>
                    <select name="TitleFontColor" id="TitleFontColor">
                        <option value="0">颜色</option>
                        <option value="1">红色</option>
                        <option value="2">蓝色</option>
                        <option value="3">绿色</option>

                    </select>
                </td>
            </tr>
            <tr>
                <td>完整标题:</td>
                <td colspan="4">
                    <input type="text" name="Fulltitle" class="textbox" id="Fulltitle" />
                </td>
            </tr>
            <tr>
                <td>归属栏目:</td>
                <td colspan="4">
                    <select name="ArticleCategory" id="ArticleCategory">
                        <option value="">--请选择归属栏目--</option>

                    </select>
                </td>
            </tr>
            <tr>
                <td>关 键 字</td>
                <td colspan="4">
                    <input type="text" name="KeyWords" class="textbox" id="KeyWords" />
                </td>
            </tr>
            <tr>
                <td>文章作者:</td>
                <td colspan="4">
                    <input type="text" name="Author" class="textbox" id="Author" />&nbsp;&nbsp;【<a href="javascript:void(0)" class="authorClick">未知</a>】【<a href="javascript:void(0)" class="authorClick">佚名</a>】【<a href="javascript:void(0)" class="authorClick">老王</a>】
                </td>
            </tr>
            <tr>
                <td>文章来源:</td>
                <td colspan="4">
                    <input name="Origin" id="Origin" value="" size="50" class="textbox" type="text">&nbsp;&nbsp;【<a href="javascript:void(0)" class="originInfo">不详</a>】【<a href="javascript:void(0)" class="originInfo">本站原创</a>】【<a href="javascript:void(0)" class="originInfo">互联网</a>】
                </td>
            </tr>
            <tr>
                <td>文章导读</td>
                <td colspan="4">
                    <textarea class="textbox" name="Intro" style="width: 95%; height: 80px"></textarea>
                </td>
            </tr>
            <tr>
                <td>文章内容</td>
                <td colspan="4">
                    <textarea class="textbox"  id="ArticleContent" name="ArticleContent1" rows="30" cols="40" style="width: 95%; height: 80px"></textarea>
                    <script type="text/javascript">
                        //<![CDATA[
                        // Replace the <textarea id="editor1"> with an CKEditor instance.
                        // 这里是给id属性值为ArticleContent的textare添加富文本编辑器
                        let editor = CKEDITOR.replace('ArticleContent');
                        //]]>
                    </script>

                    <textarea class="textbox" name="ArticleContent" id="txtArticleContent" rows="30" cols="40" style="display:none"></textarea>
                </td>
            </tr>
            <tr>
                <td>图片地址:</td>
                <td colspan="4">
                    <div id="content">
                        <img id="imgSrc" width="50px" height="50px" />
                        <!--这里将文件上传域给隐藏了-->
                        <input class="mini-htmlfile" type="file" id="iptFile" accept="image/*" style="display:none" />
                        <input type="button" class="btn btn-primary" id="btnChoose" value="选择 & 上传图片" />
                    </div>


                    <input name="PhotoUrl" id="PhotoUrl" value="" type="hidden">
                    <input name="AddWaterMark" id="AddWaterMark" value="1" type="checkbox">添加水印
                    <input name="InsertEditContent" id="InsertEditContent" value="1" type="checkbox">图片是否插入编辑器
                </td>



            </tr>
        </table>
        <div style="text-align:center;padding:10px;">
            <button style="width:60px;margin-right:20px;" id="btnOk">确定</button>
            <button onclick="onCancel()" style="width:60px;">取消</button>
        </div>
    </form>
</div>
<script>
    const btnChoose = document.querySelector("#btnChoose");
    const iptFile = document.querySelector("#iptFile");
    const addWaterMark = document.querySelector("#AddWaterMark");
    const imgSrc = document.querySelector("#imgSrc");
    const photoUrl = document.querySelector("#PhotoUrl");
    const insertEditContent = document.querySelector("#InsertEditContent");
    const addForm = document.querySelector("#addForm");
    // 加载文章类别;
    const ArticleCategory  = document.querySelector("#ArticleCategory");
    function loadCategory(){
        axios({
            method:"get",
            url:"/article/GetArticleCategories",
        }).then(function({data:res}){
            if(res.code===200){
                let str ="";
                transToTree(res.data,0,0);
                console.log("arr=",arr);
                for (let i = 0; i < arr.length; i++) {
                    str = str +`<option value=${arr[i].id}>${arr[i].articleCategoryName}</option> `
                }
                @*for(let i = 0;i<arr.length;i++){
                    str = str +`<option value=${arr[i].id}>${arr[i].ArticleCategoryName}</option> `
                    if(arr[i].children){
                        for(let j = 0;j<arr[i].children.length;j++ ){
                            str = str + ` <option value=${arr[i].children[j].id}>&nbsp;&nbsp; ${arr[i].children[j].ArticleCategoryName}</option>`
                        }
                    }
                }*@
                ArticleCategory.innerHTML = str;
            }
        })
    }
    loadCategory();
    //递归数组构造树形结构
    let arr = [];
    function transToTree(list, parentId, level){
        list.forEach(item => {
            if (item.parentId === parentId){
                item.articleCategoryName = "-".repeat(level) + item.articleCategoryName;
                arr.push(item);
                transToTree(list, item.id, level + 1);
            }
        });
    }
    //照片上传
    btnChoose.addEventListener("click",function(){
        iptFile.click();
    })
    iptFile.addEventListener("change",function(){
        if(!this.files[0]){
            return;
        }
        const fd = new FormData();
        fd.append("file",this.files[0]);
        let url = "/article/fileUpload";
        if(addWaterMark.checked){
            url = "/article/fileUpload?waterMark="+addWaterMark.value;
        }
        axios({
            method:"post",
            url,
            data:fd
        }).then(function({data:res}){
            if(res.code===200){
                const url = "/"+res.url
                imgSrc.src = url ;
                photoUrl.value = res.url;
                if(insertEditContent.checked){
                    let oEditor = CKEDITOR.instances.ArticleContent;//找到编辑器
                    if (oEditor.mode == 'wysiwyg') { // what you see is what you get 所见即所得
                        let img = "<img src='" + url + "'/>";
                        oEditor.insertHtml(img);//将上传成功的图片插入到编辑器中。
                    }
                    else
                        alert('You must be in WYSIWYG mode!');
                }
            }
        })
    })
    //新增文章
    addForm.addEventListener("submit",function(e){
        e.preventDefault();
        const txtArticleContent = document.querySelector("#txtArticleContent");
        const oEditor = CKEDITOR.instances.ArticleContent;//找到编辑器
        txtArticleContent.value =oEditor.getData();// 获取富文本编辑器中的内容。
        const data = serialize(this);
        axios({
            method:"post",
            url:"/Article/addArticle",
            data
        }).then(function({data:res}){
            if(res.code===200){
                alert(res.msg);
            }
        })
    })
</script>
</body>
</html>